<!--
 * @Author: Wushiqi
 * @Descripttion: 编辑资料
 * @Date: 2020-09-06 23:05:26
 * @LastEditors: Wushiqi
 * @LastEditTime: 2020-09-29 22:59:14
-->
<template>
  <div>
    <div style="margin-bottom: 2.778vw">
     <navbar /> 
    </div>

    <div class="upload-file">
      <van-uploader class="upload-img" preview-size="100vw" :after-read="afterRead" />
      <edit-banner left="头像">
        <img v-if="model.user_img" :src="model.user_img" slot="right" alt="">
        <img v-else src="@/assets/default_img.jpg" slot="right" alt="">
      </edit-banner>
    </div>
    
    <edit-banner left="昵称" @bannerClick="show = true">
      <a href="javascript:;" slot="right">{{ model.name}}</a>
    </edit-banner>
    <edit-banner left="账号">
      <a href="javascript:;" slot="right">{{ model.username}}</a>
    </edit-banner>
    <edit-banner left="性别" @bannerClick="genderShow = true">
      <a href="javascript:;" slot="right">{{ model.gender ? '男' : '女' }}</a>
    </edit-banner>
    <edit-banner left="个签" @bannerClick="textShow = true">
      <a href="javascript:;" slot="right">{{ model.user_desc}}</a>
    </edit-banner>
    <div class="edit-back" @click="$router.back()">返回个人中心</div>
    

    <van-dialog
      v-model="show"
      title="昵称"
      show-cancel-button
      @confirm="dlgConfirm"
      @cancel="content = ''"
    >
      <van-field v-model="content" autofocus />
    </van-dialog>

    <van-dialog
      v-model="textShow"
      title="个性签名"
      show-cancel-button
      @confirm="textConfirm"
      @cancel="content = ''"
    >
      <van-field v-model="content" type="textarea" autofocus />
    </van-dialog>

    <van-action-sheet v-model="genderShow" cancel-text="取消" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
import Navbar from '@/components/common/Navbar'
import EditBanner from '@/components/common/EditBanner'
export default {
  components: {
    Navbar,
    EditBanner
  },
  data() {
    return {
      model: {},
      show: false,
      textShow: false,
      content: '',
      genderShow: false,
      actions: [
        { name: '男', val: 1 },
        { name: '女', val: 0 }
      ]
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    // 进入页面获取用户信息
    async getUserInfo() {
      const res = await this.$http.get('/user/' + localStorage.getItem('id'))
      this.model = res.data[0]
    },
    // 上传头像
    async afterRead(val) {
      const fd = new FormData()
      fd.append('file', val.file)
      const res = await this.$http.post('/upload', fd)
      this.model.user_img = res.data.url
      this.userUpdate()
    },
    // 更新用户信息
    async userUpdate() {
      const res = await this.$http.post('/update/' + localStorage.getItem('id'), this.model)
      if (res.data.code === '200') {
        this.$msg.fail('修改成功')
      } else {
        this.$msg.fail(res.data.msg)
      }
    },
    // 昵称修改确定按钮点击事件
    dlgConfirm: function() {
      this.model.name = this.content
      this.userUpdate()
      this.content = ''
    },
    // 个签修改确定按钮
    textConfirm: function() {
      this.model.user_desc = this.content
      this.userUpdate()
      this.content = ''
    },
    // 性别选中事件
    onSelect: function(data) {
      this.model.gender = data.val
      this.userUpdate()
      this.genderShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
a {
  color: #777;
}
.upload-file {
  position: relative;
  overflow: hidden;
  .upload-img {
    position: absolute;
    opacity: 0; // 透明
  }
  img {
    width: 13.889vw;
    height: 13.889vw;
    border-radius: 50%;  
  }
}
.edit-back {
  color: #777;
  background-color: white;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  font-size: 17px;
}
</style>